$(function () {
	
	    $.ajax({
	        url: "http://api.yubao521.com/api/banner",
	        type: "GET",
	        async: false,
	        dataType: "json",
	        // contentType: "charset=utf-8",
	        cache: false,
	        //4 接受返回过来的数据，同样是json格式的，根据返回过来的数据给出相应的提示或操作
	        success: function (res) {
	            var outStr = "";
	            var html = "";
	            console.log(res)
	            if (res.data === undefined) {
	                outStr = "<p>暂无相片</p>"
	                html = "<p>暂无相片</p>";
	                // $('.picbox').append(outStr)
	                //$('#div_photo').append(html)
	            } else {
	                var index = 0;
					let data = res.data.data;
	                for (var i=0;i<data.length;i++) {
	                    index++;
	                    var imgArr = data[i].img;
						console.log(imgArr);
						var sb='<div class="card-body p-0 d-flex">';
						sb+='                                    <figure class="avatar me-3"><img src="images/user-7.png" alt="image" class="shadow-sm rounded-circle w45"></figure>';
						sb+='                                    <h4 class="fw-700 text-grey-900 font-xssss mt-1">"' + 作者+ '"<span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">"' + 时间 + '"</span></h4>';
						sb+='                                    <a href="#" class="ms-auto" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt text-grey-900 btn-round-md bg-greylight font-xss"></i></a>';
						sb+='                                    <div class="dropdown-menu dropdown-menu-end p-4 rounded-xxl border-0 shadow-lg" aria-labelledby="dropdownMenu2">';
						sb+='                                    <div class="card-body p-0 d-flex">';
						sb+='                                    <i class="feather-bookmark text-grey-500 me-3 font-lg"></i>';
						sb+='                                    <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Save Link <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Add this to your saved items</span></h4>';
						sb+='                                    </div>';
						sb+='                                    <div class="card-body p-0 d-flex mt-2">';
						sb+='                                    <i class="feather-alert-circle text-grey-500 me-3 font-lg"></i>';
						sb+='                                    <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Hide Post <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>';
						sb+='                                    </div>';
						sb+='                                    <div class="card-body p-0 d-flex mt-2">';
						sb+='                                    <i class="feather-alert-octagon text-grey-500 me-3 font-lg"></i>';
						sb+='                                    <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Hide all from Group <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>';
						sb+='                                    </div>';
						sb+='                                    <div class="card-body p-0 d-flex mt-2">';
						sb+='                                    <i class="feather-lock text-grey-500 me-3 font-lg"></i>';
						sb+='                                    <h4 class="fw-600 mb-0 text-grey-900 font-xssss mt-0 me-4">Unfollow Group <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>';
						sb+='                                    </div>';
						sb+='                                    </div>';
						sb+='                                    </div>';
						sb+='                                    ';
						sb+='								     <div class="card-body p-0 me-lg-5">';
						sb+='                                    <p class="fw-500 text-grey-500 lh-26 font-xssss w-100">"'+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus + '" <a href="#" class="fw-600 text-primary ms-2">See more</a></p>';
						sb+='                                    </div> ';
						/*sb+='								     ';*/
						sb+='                                    <div class="card-body d-block p-0">';
						sb+='                                    <div class="row ps-2 pe-2">';
						sb+='                                    <div class="col-xs-4 col-sm-4 p-1"><a href="images/t-10.jpg" data-lightbox="roadtrip"><img src="images/t-10.jpg" class="rounded-3 w-100" alt="image"></a></div>';
						sb+='                                    <div class="col-xs-4 col-sm-4 p-1"><a href="images/t-11.jpg" data-lightbox="roadtrip"><img src="images/t-11.jpg" class="rounded-3 w-100" alt="image"></a></div>';
						sb+='                                    <div class="col-xs-4 col-sm-4 p-1"><a href="images/t-12.jpg" data-lightbox="roadtrip" class="position-relative d-block"><img src="images/t-12.jpg" class="rounded-3 w-100" alt="image"><span class="img-count font-sm text-white ls-3 fw-600"><b>+2</b></span></a></div>';
						sb+='                                    </div>';
						sb+='                                    </div> ';
						sb+='                                    ';
						sb+='								     ';
						sb+='								     ';
						sb+='							         <div class="card-body d-flex p-0 mt-3">';
						sb+='                                    <a href="#" class="emoji-bttn d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss me-2"><i class="feather-thumbs-up text-white bg-primary-gradiant me-1 btn-round-xs font-xss"></i> <i class="feather-heart text-white bg-red-gradiant me-2 btn-round-xs font-xss"></i>2.8K Like</a>';
						sb+='                                    <div class="emoji-wrap">';
						sb+='                                    <ul class="emojis list-inline mb-0">';
						sb+='                                            <li class="emoji list-inline-item"><i class="em em---1"></i> </li>';
						sb+='                                            <li class="emoji list-inline-item"><i class="em em-angry"></i></li>';
						sb+='                                            <li class="emoji list-inline-item"><i class="em em-anguished"></i> </li>';
						sb+='                                            <li class="emoji list-inline-item"><i class="em em-astonished"></i> </li>';
						sb+='                                            <li class="emoji list-inline-item"><i class="em em-blush"></i></li>';
						sb+='                                            <li class="emoji list-inline-item"><i class="em em-clap"></i></li>';
						sb+='                                            <li class="emoji list-inline-item"><i class="em em-cry"></i></li>';
						sb+='                                            <li class="emoji list-inline-item"><i class="em em-full_moon_with_face"></i></li>';
						sb+='                                        </ul>';
						sb+='                                    </div>';
						sb+='                                    <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-message-circle text-dark text-grey-900 btn-round-sm font-lg"></i><span class="d-none-xss">22 Comment</span></a>';
						sb+='                                    <a href="#" id="dropdownMenu21" data-bs-toggle="dropdown" aria-expanded="false" class="ms-auto d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-share-2 text-grey-900 text-dark btn-round-sm font-lg"></i><span class="d-none-xs">Share</span></a>';
						sb+='                                    <div class="dropdown-menu dropdown-menu-end p-4 rounded-xxl border-0 shadow-lg" aria-labelledby="dropdownMenu21">';
						sb+='                                    <h4 class="fw-700 font-xss text-grey-900 d-flex align-items-center">Share <i class="feather-x ms-auto font-xssss btn-round-xs bg-greylight text-grey-900 me-2"></i></h4>';
						sb+='                                    <div class="card-body p-0 d-flex">';
						sb+='                                            <ul class="d-flex align-items-center justify-content-between mt-2">';
						sb+='                                                <li class="me-1"><a href="#" class="btn-round-lg bg-facebook"><i class="font-xs ti-facebook text-white"></i></a></li>';
						sb+='                                                <li class="me-1"><a href="#" class="btn-round-lg bg-twiiter"><i class="font-xs ti-twitter-alt text-white"></i></a></li>';
						sb+='                                                <li class="me-1"><a href="#" class="btn-round-lg bg-linkedin"><i class="font-xs ti-linkedin text-white"></i></a></li>';
						sb+='                                                <li class="me-1"><a href="#" class="btn-round-lg bg-instagram"><i class="font-xs ti-instagram text-white"></i></a></li>';
						sb+='                                                <li><a href="#" class="btn-round-lg bg-pinterest"><i class="font-xs ti-pinterest text-white"></i></a></li>';
						sb+='                                            </ul>';
						sb+='                                        </div>';
						sb+='                                        <div class="card-body p-0 d-flex">';
						sb+='                                            <ul class="d-flex align-items-center justify-content-between mt-2">';
						sb+='                                                <li class="me-1"><a href="#" class="btn-round-lg bg-tumblr"><i class="font-xs ti-tumblr text-white"></i></a></li>';
						sb+='                                                <li class="me-1"><a href="#" class="btn-round-lg bg-youtube"><i class="font-xs ti-youtube text-white"></i></a></li>';
						sb+='                                                <li class="me-1"><a href="#" class="btn-round-lg bg-flicker"><i class="font-xs ti-flickr text-white"></i></a></li>';
						sb+='                                                <li class="me-1"><a href="#" class="btn-round-lg bg-black"><i class="font-xs ti-vimeo-alt text-white"></i></a></li>';
						sb+='                                                <li><a href="#" class="btn-round-lg bg-whatsup"><i class="font-xs feather-phone text-white"></i></a></li>';
						sb+='                                            </ul>';
						sb+='                                        </div>';
						sb+='                                        <h4 class="fw-700 font-xssss mt-4 text-grey-500 d-flex align-items-center mb-3">Copy Link</h4>';
						sb+='                                        <i class="feather-copy position-absolute right-35 mt-3 font-xs text-grey-500"></i>';
						sb+='                                        <input type="text" value="https://socia.be/1rGxjoJKVF0" class="bg-grey text-grey-500 font-xssss border-0 lh-32 p-2 font-xssss fw-600 rounded-3 w-100 theme-dark-bg">';
						sb+='                                    </div>';
						sb+='                                </div> ';
	
	                    	
                                   
									 
	
	                    if (index % 4 == 0) {
	                        index = 0;
	                    }
	                    //$('.picbox>ul').eq(index).append(outStr)
	
	                }
	                $('#test1').append(sb);
	               
	                
	
	            }
	
	        },
	        error: function (XMLHttpRequest, textStatus, errorThrown) {
	            alert(XMLHttpRequest.readyState);
	        }
	    });
	
	
	
	
	
	
});



